<template>
  <div class="divBox">
    <el-card class="box-card">
      <!-- <el-form :model="formValidate" label-width="130px" :rules="ruleValidate">
        <el-row :gutter="24">
          <el-col :span="10">
            <el-form-item label="免审口令：" prop="code">
              <el-input v-model="formValidate.code" placeholder="请输入免审口令" />
              <Tooltip content="设置了此选项后，用户在小程序端创建名片时输入此正确免审口令则无需管理员在后台设置员工，将自动成为员工" placement="right">
                <Icon type="ios-alert" />
              </Tooltip>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>-->
      <div class="setin">
        <div class="oaform">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
            <FormItem label="企业密令" prop="code">
              <Input v-model="formValidate.code" placeholder="请输入企业密令"></Input>
              <Tooltip
                content="设置了此选项后，用户在小程序端创建名片时输入此正确企业密令则无需管理员在后台设置员工，将自动成为员工"
                placement="right"
              >
                <Icon type="ios-alert" />
              </Tooltip>
              <br />
              <br />
            </FormItem>
            <FormItem label="密令错误" prop="btn_code_err">
              <Input v-model="formValidate.btn_code_err" placeholder="请输入密令错误文章"></Input>
              <Tooltip content="用户在小程序端创建名片时，企业密令输入错误提示文案" placement="right">
                <Icon type="ios-alert" />
              </Tooltip>
              <br />
              <br />
            </FormItem>
            <FormItem label="未输入密令" prop="btn_code_miss">
              <Input v-model="formValidate.btn_code_miss" placeholder="请输入未输入密令时的文章"></Input>
              <Tooltip content="用户在小程序端创建名片时，企业密令没有输入提示文案" placement="right">
                <Icon type="ios-alert" />
              </Tooltip>
              <br />
              <br />
            </FormItem>
            <FormItem>
              <el-button type="primary" @click="tijiao('formValidate')">提交</el-button>
              <!-- <Button type="primary" @click="tijiao('formValidate')">提交</Button> -->
            </FormItem>
          </Form>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { setCard,getCompanyInfo } from "@/api/buss";

import Vue from "vue";
import formCreate from "@form-create/iview";
Vue.use(formCreate);
import "view-design/dist/styles/iview.css";
import ViewUI from "view-design";
Vue.use(ViewUI);

export default {
  data() {
    return {
      formValidate: {
        code: "",
        btn_code_err: "",
        btn_code_miss: ""
      },
      ruleValidate: {
        code: [{ required: true, message: "请输入企业密令", trigger: "blur" }],
        btn_code_err: [
          { required: true, message: "请输入密令错误文章", trigger: "blur" }
        ],
        btn_code_miss: [
          {
            required: true,
            message: "请输入未输入密令时的文章",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted(){
    getCompanyInfo().then(res=>{
      this.formValidate.code = res.data.set_up.secret_code
      this.formValidate.btn_code_err = res.data.set_up.btn_code_err
      this.formValidate.btn_code_miss = res.data.set_up.btn_code_miss
    })
  },
  methods: {
    tijiao(name) {
       this.$refs[name].validate((valid) => {
         if (valid) {
          setCard({
            secret_code:this.formValidate.code,
            btn_code_err:this.formValidate.btn_code_err,
            btn_code_miss:this.formValidate.btn_code_miss
          }).then(res=>{
            console.log(res)
            this.$message.success(res.message)
          }).catch(err=>{
            this.$message.error(err)
          })
         } else {
           this.$Message.error('请填写信息');
         }
       });
    }
  }
};
</script>
<style lang="stylus" scoped>
/deep/.ivu-form-item-error-tip {
  top: 52%;
}

/deep/.ivu-form-item {
  margin-bottom: 0px;
}

/deep/.ivu-form-item-content {
  display: flex;
}

/deep/.ivu-tooltip-inner {
  max-width: 800px;
}

/deep/.ivu-tooltip {
  margin-left: 10px;
}

.setin {
  background-color: #fff;

  // margin: 20px;
  // margin-left: 12px;
  .span {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #E1E1E1;
    font-size: 14px;
    padding-left: 20px;
  }
}

.oaform {
  width: 350px;
  margin: 20px;
  padding-bottom: 20px;
}
</style>
